<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
          <div :class="['swiper-slide', 'swiper-slide-' + index]" v-for="(val, index) in 5" :key="index">Slide  ------------{{val}}</div>
      </div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <div style="width:100%;height:800px"></div>
    <div style="width:100%;height:800px"></div>
    <div style="width:100%;height:800px"></div>
    <div style="width:100%;height:800px"></div>
    <div style="width:100%;height:800px"></div>
  </div>
</template>
<script>
import Swiper from 'swiper'
export default {
  name: 'swiper',
  data () {
    return {
    }
  },
  mounted () {
    const prev = document.getElementsByClassName('swiper-button-prev')[0]
    const next = document.getElementsByClassName('swiper-button-next')[0]
    /* eslint-disable no-new */
    const swiper = new Swiper('.swiper-container', {
      direction: 'horizontal',
      slideToClickedSlide: true,
      loop: true, // 让Swiper看起来是循环的
      loopAdditionalSlides: 5,
      centeredSlides: true,
      autoplay: false, // 自动切换的时间间隔
      speed: 600,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      autoplayDisableOnInteraction: false,
      slidesPerView: 'auto',
      spaceBetween: 18,
      observer: true,
      observeParents: true
    })
    const updateSize = () => {
      console.log(document.body.clientWidth)
      prev.style.left = (document.body.clientWidth - 1230) / 2 + 18 + 'px'
      next.style.right = (document.body.clientWidth - 1230) / 2 + 18 + 'px'
      swiper.updateSize()
    }
    updateSize()
    window.onresize = function () {
      updateSize()
    }
  }
}
</script>
<style lang="less" scoped>
.swiper-container {
  width: 100%;
  height: 500px;
}
.swiper-slide{
  width: 1230px;
  height: 300px;
  text-align: center;
  margin: auto 0;
}
.swiper-slide-0{
  background: red;
}
.swiper-slide-1{
  background: black;
}
.swiper-slide-2{
  background: green;
}
.swiper-slide-3{
  background: yellow;
}
.swiper-slide-4{
  background: pink;
}
</style>
<style lang="less">
.swiper-slide-active{
  height: 500px !important;
}
</style>
